import React from 'react'
import Img from '../../public/icon/right-top.png'
import { Switch } from 'antd';
function SheBeiRTop() {
    const onChange = (checked) => {
        console.log(`switch to ${checked}`);
    };
    return (
        <div>
            <div className='Tops_Com'>
                <div className='Imgs_com'>
                    <h3>设备检测</h3>
                </div>
                <dl>
                    <dt><img src={Img} alt="" /></dt>
                    <dd>
                        <p>正常设备</p>
                        <meter style={{ width: "200px", height: "30px", backgroundImage: 'linear-gradient(to right, #00EAC5, #00DC74)' }} min="0" max="1000" value="800"></meter>
                    </dd>
                    <dd>
                        <p>异常设备</p>
                        <meter style={{ width: "200px", height: "30px", backgroundImage: 'linear-gradient(to right, #F80101,#A00707)' }} min="0" max="1000" value="200"></meter>
                    </dd>
                </dl>
                <div className='Ul_Com'>
                    <ul>
                        <li><p>序号</p><p>设备名称</p><p>设备状态</p></li>
                        <li><p>1</p><p>热成像</p><p><Switch defaultChecked onChange={onChange} /></p></li>
                        <li><p>2</p><p>高能雷达</p><p><Switch defaultChecked onChange={onChange} /></p></li>
                        <li><p>3</p><p>核打击卫星</p><p><Switch defaultChecked onChange={onChange} /></p></li>
                        <li><p>4</p><p>天眼</p><p><Switch defaultChecked onChange={onChange} /></p></li>
                        <li><p>5</p><p>红外线扫描</p><p><Switch defaultChecked onChange={onChange} /></p></li>
                    </ul>
                </div>
            </div>
        </div >
    )
}

export default SheBeiRTop
